<template>
  <app-chat :options="options"></app-chat>
</template>
<script setup>
const props = defineProps({
  data: Array,
})

const options = computed(() => {
  const labels = []
  const values = []

  props.data.forEach(item => {
    labels.push(item.label)
    values.push(item.value)
  })

  return {
    type: 'doughnut',
    data: {
      labels: labels,
      datasets: [
        {
          data: values,
          backgroundColor: ['rgba(247, 37, 133, 0.8)', 'rgba(100, 116, 139, 0.6)'],
          borderWidth: 0,
          hoverOffset: 10,
        },
      ],
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      cutout: '70%',
      plugins: {
        legend: {
          position: 'bottom',
          labels: {
            usePointStyle: true,
            padding: 20,
            font: {
              family: 'Inter',
            },
          },
        },
        tooltip: {
          backgroundColor: 'rgba(20, 33, 61, 0.9)',
          titleFont: {
            family: 'Inter',
            size: 14,
          },
          bodyFont: {
            family: 'Inter',
          },
          padding: 12,
          cornerRadius: 8,
        },
      },
    },
  }
})
</script>
<style lang="scss" scoped>
.canvas {
  height: 300px;
}
</style>
